import React, { useEffect } from 'react';
import { getDashboard } from '@/services/api';

// 引入 ECharts 主模块
const echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/pie');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

const ApplyEchars = () => {
  useEffect(() => {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('ApplyEchars'), 'light');
    getDashboard().then((resp: any) => {
      const data: any = [];
      let gradeNum: number = 0;
      if (resp.status === 'success') {
        resp.data.sign_students_num.forEach((e: any) => {
          gradeNum += e.cnt;
          data.push({ value: e.cnt, name: e.grade_name });
        });
      }

      const yMax = 500;
      const dataShadow = [];

      // eslint-disable-next-line no-plusplus
      for (let i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
      }

      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        title: {
          text: `报名总人数：${gradeNum}`,
          // textAlign: 'center',
          textStyle: {
            // textAlign: 'center',
            marginLeft: 300,
          },
        },
        series: [
          {
            name: '报名人数',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center',
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold',
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data,
          },
        ],
      };
      myChart.setOption(option);
    });
  }, []);

  return <div id="ApplyEchars" style={{ width: '100%', height: 600 }} />;
};

export default ApplyEchars;
